import {
  ProFormDateTimePicker,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { Modal, Form, Input, Select } from 'antd';
import React, { useEffect } from 'react';
import { getUserList } from '@/services/api/user';
import { useState, useImperativeHandle } from 'react';

const { Option } = Select;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const RechargeForm = (props, ref) => {
  const { data } = props;
  const [userList, setUserList] = useState([]);
  const [form] = Form.useForm();

  useImperativeHandle(ref, () => ({
    form: form,
  }));

  useEffect(() => {
    getUserList({ page: 1, pageSize: 9999 }).then((res) => {
      console.log(res, '==');
      if (res.code === 0) {
        setUserList(
          res.data?.list?.map((r) => ({
            label: r.username,
            value: r.id,
            ...r,
          })),
        );
      }
    });
  }, []);
  // userId
  // cruNum
  // preNum
  // const onFinish = (values) => {
  //   console.log(values, '--');

  // };
  return (
    <Form
      {...layout}
      form={form}
      name="control-hooks"
      initialValues={{ username: data.username, preNum: data.num }}
    >
      {/* <Form.Item name="userId" label="用户" rules={[{ required: true }]}>
        <Select
          options={userList}
          showSearch
          // labelInValue={true}
          onChange={(e) => {

            const num = userList.filter(x=>x.id===e)[0]?.num
            form.setFieldsValue({preNum:num})
           
          }}
          filterOption={(input, option) =>
            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
          }
        />
      </Form.Item> */}
      <Form.Item name="username" label="用户">
        <Input disabled />
      </Form.Item>
      <Form.Item name="preNum" label="当前条数">
        <Input disabled />
      </Form.Item>
      <Form.Item name="curNum" label="输入条数" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
};

export default React.forwardRef(RechargeForm);
